<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .box{
            padding: 10px;
            margin: 20px;
            border: 1px solid #666;
        }
    </style>
</head>
<body>
    <!-- 定义挂载点 -->
    <div id="app">
        <v-one></v-one>
        <v-one></v-one>
        <!-- 2.v-if和v-show作用在组件上的时候，v-if切换会引起生命周期的销毁和创建，v-show不会 -->
        <button @click="isShow = !isShow">切换</button>
        <v-one v-show="isShow"></v-one>
    </div>

    <template id="one">
        <div class="box">
            <h1>this is one</h1>
            <button @click="c">按钮</button>
            <v-two></v-two>
        </div>
    </template>

    <template id="two">
        <div class="box">
            <h1>this is two</h1>
        </div>
    </template>

    <script>
       let vm =  new Vue({
            //挂载点
            el:"#app",
            //数据
            data:{
                isShow:true
            },
            //方法
            methods:{},
            //注册组件
            components:{
                //vOne是vm的局部组件，vm是vOne的父组件，vOne是vm的子组件
                //3.一个组件只能用自己的东西（data,子组件，methods,computed,watch,filters)
                vOne:{
                    template:"#one",
                    //1.组件没有el，data必须是一个函数，返回一个object，其他的就是vue是一模一样的
                    methods:{
                        c(){
                            console.log("点击")
                        }
                    },
                    //2.组件生命周期
                    //每调用一次组件，都会产生一个新的vue实例
                    mounted(){
                        console.log("挂载完成");
                    },
                    beforeDestroy(){
                        console.log("将要卸载");
                    },
                    components:{
                        vTwo:{
                            template:"#two"
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>